<template>
  <div class="main">
    <div class="top">
      <div class="onePage" ref="onePage"></div>
      <div class="twoPage" ref="twoPage"></div>
      <div class="threePage" ref="threePage"></div>
    </div>
    <div class="bottom">
      <div class="fourPage" ref="fourPage"></div>
      <div class="fivePage" ref="fivePage"></div>
    </div>
  </div>
</template>
<script>
import { getUserData, userFrom, userSort, userPlus, userLongTime } from '../api/dataCount.js'
export default {
  data () {
    return {
      userData: []
    }
  },
  mounted () {
    this.getData()
    this.getFrom()
    this.getSort()
    this.userCange()
    this.userLong()
  },
  methods: {
    // 获取用户数量
    getData () {
      getUserData({ info: '123456789' }).then(({ data }) => {
        this.userData = data
        const myChart = this.$echarts.init(this.$refs.onePage)
        myChart.setOption({
          title: {
            text: '用户数量及教师男女比例',
            left: 'center'
          },
          tooltip: {},
          xAxis: {
            data: ['学校', '教师', '男', '女', '未知']
          },
          yAxis: {},
          series: [
            {
              name: '数量',
              type: 'bar',
              data: this.userData
            }
          ]
        })
        // console.log(this.userData)
      })
    },
    // 用户来源
    getFrom () {
      userFrom({ userFeom: '你好' }).then(({ data }) => {
        // console.log(data)
        const myChart = this.$echarts.init(this.$refs.twoPage)
        const option = {
          title: {
            text: '教师分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left'
          // },
          series: [
            {
              name: '人数',
              type: 'pie',
              radius: '70%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    // 支教排序
    getSort () {
      userSort({ info: '排序' }).then(({ data }) => {
        const myChart = this.$echarts.init(this.$refs.threePage)
        const option = {
          title: {
            text: '支教排行榜',
            left: 'center'
          },
          xAxis: {
            type: 'value'
          },
          tooltip: {},
          yAxis: {
            type: 'category',
            data: data.uname.reverse()
          },
          grid: {
            left: '15%'// 调整y轴字体显示不完整，原来值是3%
          },
          series: [
            {
              data: data.ucount.reverse(),
              type: 'bar'
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    // 用户数增长
    userCange () {
      const timeArr = []
      const newTimeArr = []
      const tData = [0, 0, 0, 0, 0]
      const sData = [0, 0, 0, 0, 0]
      userPlus({ info: '数量增长' }).then(({ data }) => {
        for (let i = 0; i < 5; i++) {
          const timeValue = this.$moment().subtract(i, 'days').format('YYYY-MM-DD')
          timeArr.push(timeValue.slice(5, 11))
          newTimeArr.push(timeValue)
        }
        for (let i = 0; i < data.arr1.length; i++) {
          const dataIndex = newTimeArr.indexOf(data.arr1[i].mytime)
          if (!(dataIndex === -1)) {
            tData[dataIndex] = data.arr1[i].tcount
            // console.log(dataIndex)
          }
          // console.log(dataIndex)
        }
        for (let i = 0; i < data.arr2.length; i++) {
          const dataIndex = newTimeArr.indexOf(data.arr2[i].mytime)
          if (!(dataIndex === -1)) {
            sData[dataIndex] = data.arr2[i].tcount
            // console.log(dataIndex)
          }
          // console.log(dataIndex)
        }
        // console.log('4444444', timeArr, data, tData, sData)
        const myOption = this.$echarts.init(this.$refs.fourPage)
        const option = {
          title: {
            text: '用户新增人数',
            left: '18%'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['学校', '教师'],
            right: '18%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: timeArr.reverse()
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '学校',
              type: 'line',
              data: sData.reverse()
            },
            {
              name: '教师',
              type: 'line',
              data: tData.reverse()
            }
          ]
        }
        myOption.setOption(option)
      })
    },
    // 支教次数和时长
    userLong () {
      userLongTime({ info: '支教次数与时长' }).then(({ data }) => {
        const myOption = this.$echarts.init(this.$refs.fivePage)
        const option = {
          title: {
            text: '支教总次数及时长',
            left: 'center'
          },
          tooltip: {},
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['时长(年)', '支教次数'],
            left: '18%'

          },
          grid: {
            left: '20%'// 调整y轴字体显示不完整，原来值是3%
          },
          series: [
            {
              data: data,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        }
        myOption.setOption(option)
      })
    }

  }

}
</script>
<style scoped lang="less">
.main{
    .top{
      display: flex;
      justify-content: start;
      width:100%;
      height:100%;
      background: white;
      .onePage{
        // background: #100b2b;
        width: 400px;
        height:280px;
      }
      .twoPage{
        // background: #100b2b;
        width: 400px;
        height:280px;
      }
      .threePage{
        // background: firebrick;
        flex:auto
      }

    }
    .bottom{
      display: flex;
      justify-content: start;
      width:100%;
      height:100%;
      .fourPage{
        background: white;
        width: 600px;
        height:280px;
      }
      .fivePage{
        background: white;
        flex:auto
      }
    }

}

</style>
